<template>
  <el-drawer :title="`${name ||''}|信息详情`" :visible.sync="drawer" v-if="dataLoaded">
    <div class="divBox div-box-detail">
      <el-descriptions class="descriptions-box" direction="vertical" title="用户基本信息" :column="2" size='mini' border>
        <el-descriptions-item label="人员ID">{{ staffDetail.staffInfo.staff_id }}</el-descriptions-item>
        <el-descriptions-item label="姓名">{{ staffDetail.staffInfo.name }}</el-descriptions-item>
        <el-descriptions-item label="头像">
          <el-image style="width: 26px; height: 26px" :src="staffDetail.staffInfo.avatar"
            :preview-src-list="[staffDetail.staffInfo.avatar]" />
        </el-descriptions-item>
        <el-descriptions-item label="手机号">{{ staffDetail.staffInfo.phone }}</el-descriptions-item>
        <el-descriptions-item label="服务价格">{{ staffDetail.staffInfo.cost_price }}</el-descriptions-item>
        <el-descriptions-item label="账号状态">
          <el-tag v-if="staffDetail.mer_status==1" size="mini">
            {{statusList[staffDetail.mer_status].name}}
          </el-tag>
          <el-tag v-if="staffDetail.mer_status!=1" type="danger"> {{statusList[staffDetail.mer_status].name}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="添加时间">{{ staffDetail.create_time }}</el-descriptions-item>
        <el-descriptions-item label="审核状态">
          <el-tag size="mini" type="success" v-if="staffDetail.examine_status==1">
            {{examineList[staffDetail.examine_status].name}}
          </el-tag>
          <el-tag type="danger" v-else-if="staffDetail.examine_status==2">
            {{examineList[staffDetail.examine_status].name}}</el-tag>

          <el-tag size="mini" v-else>
            {{examineList[staffDetail.examine_status].name}}
          </el-tag>

        </el-descriptions-item>
        <el-descriptions-item label="审核时间">{{ staffDetail.examine_time }}</el-descriptions-item>
        <el-descriptions-item label="审核说明">{{ staffDetail.examine_remark }}</el-descriptions-item>

      </el-descriptions>
      <el-descriptions class="descriptions-box" direction="vertical" title="行业信息" :column="2" size='mini' border>
        <el-descriptions-item label="行业ID">{{ staffDetail.industryInfo.industry_id }}</el-descriptions-item>
        <el-descriptions-item label="行业名称">{{ staffDetail.industryInfo.industry_name }}</el-descriptions-item>
        <el-descriptions-item :label="field.field_name" v-for="(field,index) in industryField" :key="index"
          v-if="Object.keys(industryField).length">
          <div
            v-if="field.field_type=='radio' ||field.field_type=='checkbox'|| field.field_type=='label'|| field.field_type=='select'">
            {{ field.field_selected_value }}
          </div>
          <div v-else-if="field.field_type=='image'">
            <el-image :src="field.field_value" :preview-src-list="[field.field_value]"></el-image>

          </div>
          <div v-else-if="field.field_type=='images'">
            <el-image :src="imgUrl" :preview-src-list="field.field_value" v-for="(imgUrl,k) in field.field_value"
              :key="k"></el-image>
          </div>
          <div v-else-if="field.field_type=='file'">
            <i class="el-icon-files" v-if="field.field_value"></i>
            <el-button type="primary" size="mini" :href="field.field_value"
              @click="handleDownload(field.field_value)">下载</el-button>
          </div>
          <div v-else>{{ field.field_value }}</div>
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions class="descriptions-box" direction="vertical" title="平台信息" :column="2" size='mini' border>
        <el-descriptions-item label="账号状态">
          <el-tag v-if="staffDetail.staffInfo.status==1" size="mini">
            {{ statusList[staffDetail.staffInfo.status].name }}
          </el-tag>
          <el-tag  type="danger" v-else> {{ statusList[staffDetail.staffInfo.status].name }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="审核状态">
          <el-tag size="mini" type="success" v-if="staffDetail.staffInfo.is_examine==1">
            {{examineList[staffDetail.staffInfo.is_examine].name}}
          </el-tag>
          <el-tag type="danger" v-else-if="staffDetail.staffInfo.is_examine==2">
            {{examineList[staffDetail.staffInfo.is_examine].name}}</el-tag>

          <el-tag size="mini" v-else>
            {{examineList[staffDetail.staffInfo.is_examine].name}}
          </el-tag>
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </el-drawer>

</template>

<script>
  import {
    staffMerchantDetail
  } from '@/api/reservation'

  export default {
    name: 'ReservationStaffDetail',
    props: {
      examineList: {
        type: Array,
        default: function() {
          return []
        }
      },
      statusList: {
        type: Array,
        default: function() {
          return []
        }
      }
    },
    data() {
      return {
        drawer: false,
        staffDetail: [],
        industryField: [],
        name: "",
        dataLoaded: false
      }
    },
    watch: {
      staffDetail() {
        this.dataLoaded = true // 当props.data改变时，触发watch方法，更新dataLoaded变量
      }
    },
    methods: {
      handleDownload(fileUrl) {
        const link = document.createElement('a');
        link.href = window.URL.createObjectURL(new Blob([fileUrl])); //将内容转为blob格式
        link.setAttribute('download', fileUrl.split('/')[fileUrl.split('/').length - 1]);
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link)
      },
      getStaffMerchantDetail(id, name) {
        let _this = this;
        _this.name = name
        staffMerchantDetail(id).then(({
          data,
          message
        }) => {
          let staffDetail = Object.assign({}, data)
          _this.staffDetail = Object.assign({}, data)

          let industryFieldInfo = Object.assign({}, staffDetail.industryFieldInfo)
          let industry_field = Object.assign({}, industryFieldInfo.industry_field)
          let staffInfo = Object.assign({}, staffDetail.staffInfo)
          let industry_field_value = staffInfo.industry_field_value
          if (industry_field_value != null & Object.keys(industry_field).length > 0) {
            Object.values(industry_field).forEach((item, index) => {
              if (industry_field_value.hasOwnProperty(item.field_id)) {
                item.field_value = industry_field_value[item.field_id]

                if (['radio', 'checkbox', 'label', 'select'].includes(item.field_type)) {
                  item.field_option = item.field_option.split('|') // 多选类型处理
                  if (item.field_type !== 'radio' && item.field_type !== 'select') {
                    item.field_value = item.field_value ? item.field_value.split(',') : []
                    const validIndexs = item.field_value.map(v => Number(v.trim())).filter(num => !isNaN(num) &&
                      num >= 0 && num < item.field_option.length)
                    item.field_selected_value = validIndexs.map(idx => item.field_option[idx]).join(',')
                  } else {
                    const idx = Number(item.field_value)
                    item.field_selected_value = !isNaN(idx) && idx < item.field_option.length ? item
                      .field_option[idx] : null

                  }
                }
              }
            })
            _this.industryField = industry_field
          }


        }).catch(({
          message
        }) => {
          _this.$message.error(message)
        })
        _this.$nextTick(() => {
          _this.drawer = true
        })

      }
    }
  }
</script>

<style>
  .el-main .el-drawer__header {
    border-bottom: 1px solid #dcdfe6;
  }

  .div-box-detail {
    padding: 1.2rem 1.6rem;
  }

  .descriptions-box {
    margin-bottom: 0.82rem;
  }

  .el-descriptions__title {
    font-size: 12px;
  }
</style>
